<template>
<div class="sidebar" :class="classToggle" >

    <div class='sliderContent'>
        <!--<a href="#/home/homepage" class="logo">
            <span class="logo-mini"><i class="fa fa-book mini" aria-hidden="true"></i></span>
            <span class="logo-lg"><i class="fa fa-book" aria-hidden="true"></i> <b>招商局</b>HR系统</span>
        </a>-->
        <router-link  class="logo"  to="/home/homepage">
            <span class="logo-mini"><i class="fa fa-book mini" aria-hidden="true"></i></span>
            <span class="logo-lg"><b>招商局</b>HR系统</span>  	
        </router-link>         
        <div class='main-sider' >
            <div class='topTitle'>导航栏</div>
            <div class="barBox">
                <el-menu router>

                
                    
                 <el-menu-item v-for='k in list' :index="k.path" >
                    <template slot="title"><i class="el-icon-message"></i>{{k.title}}</template>
                  </el-menu-item>

                <el-menu-item :index='"/mySalary"'>
                  <template slot="title"><i class="el-icon-message"></i>我的工资</template>
                </el-menu-item>
                  
                  <!-- <el-menu-item  index="2">
                    <template slot="title"><i class="el-icon-menu"></i>我的工资</template>
                  </el-menu-item>

                  <el-menu-item  index="3">
                    <template slot="title"><i class="el-icon-menu"></i>发起休假</template>
                  </el-menu-item> -->

                </el-menu>
               
            </div>
        </div>
        <div class='mini-menu'>
            <ul>
                <li><a ><i class="fa fa-book"></i></a></li>
                <li><a ><i class="fa fa-user"></i></a></li>
            </ul>  
        </div>
    </div>

    
    <a  class='collapseBtn' v-on:click="toggleCollapse('1')"><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>

</template>

<script>
// import 'Mock/mock_data'
import Vue from 'vue';
import { Menu, Submenu, MenuItem, MenuItemGroup, Row } from 'element-ui';
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Row);

import Left from '@/components/public/leftNav-child';
import Router from 'vue-router'

export default {
  data() {
    return {
      menuData: null,
      bol: true,
      isBig: true,
      isCollapse: false,
      count: 0,
      menu: null
    };
  },
  computed: {
    classToggle: function() {
      return {
        'mini-slider': !this.isBig,
        'big-slider': this.isBig,
        collapsed: this.isCollapse
      };
    },
    defaultActive: function() {
      var target = this.$route.query.target;

      if (!target) {
        if (!this.menuData) {
          console.log(this.menuData, 'this.menuData');
          return '';
        }
        console.log(this.menuData, 'this.menuData');
        if (this.menuData.length > 0) {
          if (
            this.menuData[1].childList &&
            this.menuData[1].childList.length > 0
          ) {
            this.menu = this.menuData[1].id;

            var node = this.iterateMenu(this.menuData[1].childList);
            if (node.menuUrl.indexOf('?')) {
              var url = node.menuUrl + '&target=' + this.menu;
            } else {
              var url = node.menuUrl + '?target=' + this.menu;
            }
            console.log(this.menu, 'this.menu');
            this.$router.push(url);

            return this.menu;
          } else {
            this.$router.push(
              this.menuData[1].menuUrl + '?target=' + this.menuData[1].id
            );

            return this.menuData[1].id + '';
          }
        }
      } else {
        return target;
      }
    },
    defaultOpenMenu: function() {
      if (!this.menu || this.menu.indexOf('-') === -1) {
        return [];
      }

      return [this.menu.split('-')[0]];
    },
    list(){
      return this.$router.options.routes[1].children
    }
  },
  props: {
    isChangeBigWidth: {
      type: Boolean,
      default: false
    },
    menuDataTest: {
      type: Array,
      default: function() {
        return [];
      }
    },
    defaultActiveTest: {
      type: String,
      default: ''
    },
    defaultOpenMenuTest: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  methods: {
    menuIndexFilter(_index, _index2) {
      if (!_index2) {
        return '' + _index;
      }
      return _index + '-' + _index2;
    },
    iterateMenu: function(data) {
      console.log(data, 'data');
      if (data[0].childList && data[0].childList.length > 0) {
        this.menu = this.menu + '-' + data[0].id;
        console.log(this.menu, 'this.menu one');
        this.iterateMenu(this.data[0]);
      } else {
        this.menu = this.menu + '-' + data[0].id;
        console.log(this.menu, 'this.menu two');
        return data[0];
      }
    },
    alterToggleWidth() {
      this.isBig = this.isBig ? false : true;
    },
    alterCollspseClass() {
      this.isCollapse = this.isCollapse ? false : true;
    },
    toggleCollapse(type) {
      if (type === '2') {
        if (this.isCollapse) {
          this.alterToggleWidth();
        } else {
          return;
        }
      } else {
        this.alterToggleWidth();
        this.alterCollspseClass();
      }
      console.log(this.isChangeBigWidth, 'me');
      this.$emit('update:isChangeBigWidth', !this.isChangeBigWidth);
      this.$emit('test', !this.isChangeBigWidth);
    }
  },
  components: {
    'v-tree': Left
  },
  created: function() {},
  mounted() {
    console.log(this.list,'list')
  }
};
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;

  color: #fff;
  z-index: 1100;
}

.sidebar .collapseBtn {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0px;
  right: -46px;
  z-index: 1079;
  padding: 17px 15px 17px 15px;
  display: inline-block;
  background-color: #0268b3;
}
.sidebar .collapseBtn:hover {
  background: rgba(0, 0, 0, 0.1);
}
.sidebar .main-sider .topTitle {
  color: #848484;
  padding: 60px 25px 10px 15px;
  font-size: 12px;
}
.sliderContent {
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  bottom: 0;
}
/*滚动条样式*/
.sliderContent::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
/*.sliderContent::-webkit-scrollbar {
		display: none;
    }*/
.sliderContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(60, 141, 188, 0.4);
  background: rgba(60, 141, 188, 1);
}
.sliderContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.7);
  border-radius: 0;
  background: rgba(60, 141, 188, 0.7);
}
.sliderContent {
  scrollbar-arrow-width: 2px;
  scrollbar-arrow-color: #0268b3;
  scrollbar-face-color: #0268b3;
  scrollbar-3dlight-color: #0268b3;
  scrollbar-highlight-color: #0268b3;
  scrollbar-shadow-color: #0268b3;
  scrollbar-darkshadow-color: #0268b3;
  scrollbar-track-color: #0268b3;
  scrollbar-base-color: #0268b3;
}
.big-slider {
  width: 230px;
  transition: width 0.4s ease-in-out;
  background-color: #fbfdff;
}
.big-slider .router {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-left: -25px;
  padding: 0px 45px 0px 25px;
}

.big-slider .sliderContent {
  width: 230px;
  transition: width 0.4s ease-in-out;
  background-color: #fbfdff;
}
.mini-slider .sliderContent {
  width: 50px;
  transition: width 0.4s ease-in-out;
  background-color: #fbfdff;
}
.mini-slider {
  width: 50px;
  transition: width 0.4s ease-in-out;
  background-color: #fbfdff;
}
.mini-slider .main-sider {
  display: none;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.mini-slider .barBox {
  width: 50px;
  overflow: hidden;
  transition: width 0.4s ease-in-out;
}
.big-slider .barBox {
  width: 230px;
  overflow: hidden;
  transition: width 0.4s ease-in-out;
}
.big-slider .main-sider {
  display: block;
  opacity: 1;
  transition: all 0.4s ease-in-out;
}
.big-slider .mini-menu {
  display: none;
}
.mini-slider .mini-menu {
  display: block;
}
.big-slider .logo {
  background-color: #0268b3;
  color: #ffffff;
  border-bottom: 0 solid transparent;
  transition: width 0.4s ease-in-out;
  display: block;
  float: left;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  width: 230px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 0 15px;
  font-weight: 300;
  overflow: hidden;
}
.mini-slider .logo {
  background-color: #0268b3;
  color: #ffffff;
  border-bottom: 0 solid transparent;
  transition: width 0.4s ease-in-out;
  display: block;
  float: left;
  height: 18px;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  width: 20px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 16px 15px;
  font-weight: 300;
  overflow: hidden;
}
.big-slider .logo .logo-mini {
  display: none;
}

.mini-slider .logo .logo-mini {
  display: block;
}

.mini-slider .logo .logo-lg {
  display: none;
}
.mini-slider .mini-menu {
  font-weight: 600;
  color: #000;
  text-align: center;
  margin-top: 50px;
}
.mini-slider .mini-menu a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.mini-slider .mini-menu li {
  line-height: 50px;
  height: 50px;
}
</style>
<style>
.main-sider .el-menu {
  background-color: #fbfdff;
}
.main-sider .el-menu .is-opened,
.main-sider .el-menu .is-opened .el-menu {
  background-color: #fbfdff;
}
.sidebar .main-sider .el-submenu .el-submenu__title {
  font-weight: 600;
}
.main-sider
  .el-menu
  .el-submenu.is-opened
  > .el-submenu__title
  .el-submenu__icon-arrow {
  -ms-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
}
.main-sider .el-menu .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  -ms-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}
.barBox > .el-menu > div > .el-submenu .el-menu > div > .el-menu-item {
  padding-left: 20px !important;
}
.barBox
  > .el-menu
  > div
  > .el-submenu
  > .el-submenu__title
  + .el-menu
  > div
  > .el-submenu
  > .el-submenu__title {
  padding-left: 20px !important;
}
.barBox
  > .el-menu
  > div
  > .el-submenu
  > .el-submenu__title
  + .el-menu
  > div
  > .el-submenu
  > .el-submenu__title
  + .el-menu
  > div
  > .el-submenu
  > .el-submenu__title {
  padding-left: 25px !important;
}
.barBox
  > .el-menu
  > div
  > .el-submenu
  > .el-submenu__title
  + .el-menu
  > div
  > .el-submenu
  > .el-submenu__title
  + .el-menu
  > div
  > .el-submenu
  > .el-submenu__title
  + .el-menu
  > div
  > .el-submenu
  > .el-submenu__title {
  padding-left: 30px !important;
}
.barBox > .el-menu > div > .el-submenu > .el-submenu__title,
.barBox > .el-menu > div > .el-menu-item {
  padding-left: 15px !important;
}

/*.barBox>.el-menu>div>.el-submenu:nth-child(4)>.el-submenu__title+.el-menu>div>li:not(:nth-child(2)){
       display: none;
    }*/
</style>
